<template>
	<view>
		
		<view class="bg-white padding-bottom" >
			<view class="flex justify-between align-center" style="padding: 40rpx 30rpx 20rpx;">
				<view class="text-bold text-xl text-black">
					热门小组
				</view>
				<view class="flex align-center text-lg" @click="goXiaozuMore">
					查看更多<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="margin-left" v-if="hotGroupList && hotGroupList.length">
				<scroll-view  :scroll-x="true"  style="white-space: nowrap;width: 100%;"  scroll-with-animation >
					<view class="scroll-box"  v-for="(item,index) in hotGroupList" :key="index" @click="goGroupDetail(item)">
						<view class="flex flex-direction justify-start" style="width:160rpx;height: 230rpx;">
							<view class="align-center flex justify-center" style="position: relative;">
								<image :src="item.image"
								 mode="aspectFill" style="width: 132rpx;height: 132rpx;border-radius: 66rpx;"></image>
							</view>
							<view class="margin-top-xs text-bold text-lg text-black u-line-1 text-center" style="width: 100%;white-space: normal;">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bg-gray" style="height: 20rpx;" ></view>
		<view class="bg-white padding-bottom">
			<view class="flex justify-between align-center" style="padding: 40rpx 30rpx 20rpx;">
				<view class="text-bold text-xl text-black">
					热门话题
				</view>
				<view class="flex align-center text-lg" @click="goHuatiMore">
					查看更多<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="margin-left" v-if="hotTalkList && hotTalkList.length">
				<scroll-view  :scroll-x="true"  style="white-space: nowrap;width: 100%;"  scroll-with-animation >
					<view class="scroll-box"  v-for="(item,index) in hotTalkList" :key="index">
						<view class="flex bg-gradient flex-direction padding-lr-lg"  :style="{background:clickBg(index+1)}" style="height: 440rpx; width: 560rpx;">
							<view class="flex align-center margin-top-lg"  v-for="(iitem,iidex) in item" :key="iidex" @click="goTalkdetail(iitem)">
								<view class="" style="position: relative;">
									<image :src="iitem.image_url"
									 mode="aspectFill" style="width: 92rpx;height: 92rpx;border-radius: 16rpx;"></image>
									 <view class="fix-num" v-if="(iitem+1) % 3 == 1" style="background-color:#EE6186 ;">
										1
									 </view>
									 <view class="fix-num" v-if="(iitem+1) % 3 == 2" style="background-color:#7ED2F5 ;">
									 	2
									 </view>
									 <view class="fix-num" v-if="(iitem+1) % 3 == 0" style="background-color:#F6B994  ;">
									 	3
									 </view>
								</view>
								<view class="flex-sub margin-left-sm" style="width: 264rpx;">
									<view class="text-bold text-lg text-black" style="width: 95%;">
										<view class="u-line-1">{{ iitem.name }}</view>
									</view>
									<view class="text-g6c text-df" v-if="iitem.join_num">
										{{ iitem.join_num }}人正在讨论
									</view>
								</view>
								<text class="cu-tag round bg-bright" style="height: 50rpx; flex-shrink: 0;" >去参与</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bg-gray" style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		show:{
			type:Boolean,
			default:true,
		}
	},
	data(){
		return {
			hotGroupList:[],
			hotTalkList:[],
		}
	},
	mounted() {
		//热门小组
		this.apipostHotgrouplist()
		//热门话题
		this.apipostHottopiclist()
	},
	methods:{
		//热门小组 更多
		goXiaozuMore(){
			uni.$u.route('/pagesCircle/group/xiaozu', {
				id: '',
			});
		},
		//话题更多
		goHuatiMore(){
			uni.$u.route('/pagesCircle/talk/list', {
				id: '',
			});
		},
		goTalkdetail(item){
			uni.$u.route('/pagesCircle/circleTalk/circleTalk', {
				id: item.id,
			});
		},
		goGroupDetail(item){
			uni.$u.route('/pagesCircle/group/mine', {
				id: item.id,
			});
		},
		//热门小组
		apipostHotgrouplist(){
			 this.$circleApi.postHotgrouplist().then(res=>{
				 this.hotGroupList = res
			 }).catch(err=>{
				 
			 })
		},
		//热门话题
		apipostHottopiclist(){
			 this.$circleApi.postHottopiclist().then(res=>{
				let data = res
				let hotTalkList = [];
				for(let i=0; i<data.length; i+=3){
					hotTalkList.push(data.slice(i,i+3))
				}
				console.log({hotTalkList})
				this.hotTalkList = hotTalkList
			 }).catch(err=>{
				 
			 })
		},
		//背景颜色
		clickBg(index){
			let bg = "linear-gradient(180deg, rgba(251,239,238,1) 0%,rgba(251,239,239,0) 100%);"
			if(index % 3 == 1 ){
				bg = 'linear-gradient(180deg, rgba(251,239,238,1) 0%,rgba(251,239,239,0) 100%);'
			}
			if(index % 3 == 2 ){
				bg = 'linear-gradient(180deg, rgba(238,241,251,1) 0%,rgba(255,255,255,0) 100%);'
			}
			if(index % 3 == 0 ){
				bg = 'linear-gradient(180deg, rgba(246,245,235,1) 0%,rgba(255,255,255,0) 100%);'
			}
			return bg
		}
	}
}
</script>

<style lang="scss" scoped>
	
.scroll-box{
		display: inline-block;
		position: relative;
		margin-right: 40rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

.bg-gradient{
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(251,239,238,1) 0%,rgba(251,239,239,0) 100%);
}
.fix-num{
	width: 16px;
	height: 16px;
	line-height: 20px;
	border-radius: 8px 0px 8px 0px;
	// background: linear-gradient(136.13deg, rgba(238,97,134,1) 2.49%,rgba(231,75,96,1) 106.48%);
	color: rgba(255, 255, 255, 1);
	font-size: 14px;
	text-align: center;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
	font-family: Arial;
	position: absolute;
	top:0;
	left: 0;
}
</style>